<template>
  <div class="codeMirror-container">
    <div class="codeMirror-title">
      <div>
        <span>代码编辑器组件示例</span>
        <span style="margin-left: 5px">
          <a href="https://olindk.gitbooks.io/codemirror/content/commands.html" target="_blank"
          >(查看codeMirror中文API文档)
          </a>
        </span>
      </div>
    </div>
    <div class="editor-container">
      <CodeMirrorEditor
        :value="editorContent.Content"
        :language="language"
        @codeChange="codeChange"
      />
    </div>
    <div class="button-container">
      <el-button type="primary" class="common-button" @click="submitCode">提交</el-button>
      <el-button class="common-button" @click="clearCode">清空</el-button>
    </div>
  </div>
</template>

<script>
import CodeMirrorEditor from '@/components/codeMirror/index'
export default {
  name: 'index',
  components:{
    CodeMirrorEditor
  },
  data(){
    return {
      editorContent:{
        Content: '',
      },
      language: 'javascript'
    }
  },
  methods:{
    // code值发生改变时
    codeChange(val){
      this.editorContent.Content = val
    },
    // 提交code
    submitCode(){
      setTimeout(() =>{
        console.log('提交数据',this.editorContent.Content)
        this.$message.success('提交成功')
      },300)
    },
    // 清空code编辑器
    clearCode(){
      !!this.editorContent.Content && this.$confirm("是否确认清空代码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () =>{
        this.$set(this.editorContent, 'Content', '')
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.codeMirror-container{
  background-color: white;
  height: calc(100vh - 170px);
  padding: 0 20px 20px;
  box-shadow: 0 0 12px rgba(0, 0,0 , 0.05);
  border-radius: 4px;
  text-align: left;
}
.codeMirror-title{
  padding: 20px 0 10px;
  border-bottom: 1px solid $greyColor;
}
.button-container{
  border-top: 1px solid $greyColor;
  padding-top: 10px;
}
</style>
